<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>开灯关灯</title>
	</head>
	<style>
		.box{
			text-align: center;
			margin-top: 50px;
		}
	</style>

	<body>
		<div class="box" >
		<img src="pic_bulboff.gif" id="on" />
		</div>
		<script>
			var on = document.getElementById('on');
			/*var i = 0;
			on.onclick = function() {
				on.src = "pic_bulbon.gif"
				i++;
				if(i % 2 == 0) {
					on.src = "pic_bulboff.gif"
				} else {
					on.src = "pic_bulbon.gif"
				}
			}*/
			on.onclick = function() {
				if (on.src.indexOf('off')!=-1) {
					on.src = "pic_bulbon.gif"
				} else{
					on.src = "pic_bulboff.gif"
				}
			}
		</script>
	</body>

</html>